import React, { Component } from 'react'
import './List.css'

export default class List extends Component {
    
    render() {
        let { users, isFirst, isLoading, err } = this.props;
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
                    isLoading ? <h2>loading....</h2> :
                    err ? <h2 style={{color:'red'}}>{ err }</h2> :
                    users.map((userObj) => {
                        return (
                            <div className="card" key={userObj.id}>
                                <a rel="noreferrer" href={ userObj.html_url } target="_blank" >
                                    <img alt="head_portrait" src={ userObj.avatar_url } style={{width:'100px'}} />
                                </a>
                                <p className="card-text">{ userObj.login }</p>
                            </div>   
                       )
                    })
                }
            </div>
        )
    }
}
